<template>
   <el-dialog :title="managerForm.id>0?'编辑管理员':'新增管理员'"
        :visible.sync="boxShow.isShow"
        @close="reset">
    <el-form :model="managerForm"  ref="managerForm" :rules="rules">
        <el-form-item label="管理员角色" label-width="100px" prop="roleid">
            <el-select v-model="managerForm.roleid">
                <el-option v-for="role in roleList"
                    :key="role.id"
                    :label='role.rolename'
                    :value='role.id'></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="管理员名称" label-width="100px" prop="username">
            <el-input v-model="managerForm.username" placeholder="请输入管理员名名称" :disabled="managerForm.id>0?true:false"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码" label-width="100px" prop="password">
            <el-input v-model="managerForm.password" type="password" placeholder="请输入管理员名密码"></el-input>
        </el-form-item>
        <el-form-item label="管理员状态" label-width="100px" prop="status">
            <template>
                <el-radio v-model="managerForm.status" :label="1" >启用</el-radio>
                <el-radio v-model="managerForm.status" :label="2" >禁用</el-radio>
            </template>
        </el-form-item>
    </el-form>

    <div slot="footer">
        <el-button type="info" size="medium" round @click="reset">取消</el-button>
        <el-button type="primary" size="medium" round @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapActions,mapState} from "vuex"
export default {
    props: ['boxShow'],
    data() {
        return {
            managerForm: {
                id: "",
                roleid: "",
                username: "",
                password: "",
                status: 1
            },
            rules: {
                roleid: {required: true,message: "请选择角色",trigger: 'blur'},
                 username: {required: true, message: "账号不能为空", trigger: 'blur'},
                password:{required: true, message: "密码不能为空", trigger: 'blur'},
                status: {required: true, message: "请选择状态", trigger: 'blur'}
            }
        }
    },
    computed: {
        ...mapState('roles',['roleList'])
    },
    methods: {
        ...mapActions('managers',['addManagerActions','editMangerActions']),
        reset() {
            this.$refs.managerForm.resetFields()
            this.managerForm = {
                id: "",
                roleid: "",
                username: "",
                password: "",
                status: 1
            }
            this.boxShow.isShow = false
        },
        submit() {
            this.$refs.managerForm.validate(valid => {
                if(valid) {
                    if(this.managerForm.id > 0) {
                        this.editMangerActions(this.managerForm)
                    } else {
                        this.addManagerActions(this.managerForm)
                    }
                    this.reset()
                } else {
                    this.$message.console.warning("请检查管理员数据是否正确");
                }
            })
        }
    }
}
</script>

<style>

</style>